<template>
  <div class="card-wrapper" v-loading="loading">
    <div class="card-top-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>特殊水卡</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cardexamine' }">线上实体卡申请记录</el-breadcrumb-item>
        <el-breadcrumb-item>修改水卡</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="edit-wrapper">
      <div class="edit-row">
        <span class="edit-label">水卡卡号</span>
        <el-input size="medium" v-model="card_number" disabled></el-input>
      </div>

      <div class="edit-row">
        <span class="edit-label">用户姓名</span>
        <el-input size="medium" v-model="full_name" placeholder="请输入用户姓名"></el-input>
      </div>

      <div class="edit-row">
        <span class="edit-label">手机号码</span>
        <el-input size="medium" v-model="tel" maxlength="11" placeholder="请输入手机号码"></el-input>
      </div>


      <div class="edit-row">
        <span class="edit-label">身份证号</span>
        <el-input size="medium" v-model="id_card" maxlength="18" placeholder="请输入身份证号"></el-input>
      </div>

      <div class="edit-row">
        <span class="edit-label">所属园区</span>
        <el-select class="edit-select" @change="chooseVillage" v-model="villageIndex" placeholder="请选择园区">
          <el-option v-for="(item,index) in villageList" :value="index" :label="item.village_name" :key="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="edit-row">
        <span class="edit-label">地址信息</span>
        <el-input size="medium" v-model="address" maxlength="18" placeholder="请输入地址信息"></el-input>
      </div>

      <el-button size="medium" class="submit-btn" @click="editCard"  type="primary">提 交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'checkcard',
    data: function () {
      return {
        loading: false,
        villageList: [],
        villageIndex: "", //选中的园区索引
        card_number: "", //水卡号  不可修改
        full_name: "", //姓名
        tel: "", //电话
        id_card: "", //身份证
        address: "", //地址
      }
    },

    inject: ['reload'],
    methods: {

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },

      chooseVillage(value){
        this.villageIndex=value;
        this.address=this.villageList[value].address
      },

      editCard() {
        const source = {
          id: this.$route.query.id,
          province: "",
          city: "",
          area: "",
          card_number: this.card_number,
          full_name: this.full_name,
          tel: this.tel,
          village_name: '',
          address: this.address,
          IDcard: "",
        };
        if (this.villageIndex !== "") {
          let village = this.villageList[this.villageIndex]
          Object.assign(source, {
            province: village.province,
            city: village.city,
            area: village.area,
            village_name: village.village_name,
          });
        }
        this.$post({
          url: "Partner/WaterCard/edit_water_apply",
          data: source,
          success: res => {
            if (res.code > 0) {
              this.$message.success(res.message);
              setTimeout(() => {
                this.$router.push({
                  path: "/cardexamine"
                })
              }, 1500)
            } else {
              this.$message.error(res.message)
            }
          },
          error: e => {
            this.$message.error("网络错误")
          }
        })
      },


      //获取水卡数据
      getCardInfo() {
        this.loading = true;
        this.$post({
          url: "Partner/WaterCard/getAccountWaterCardAudit",
          data: {
            id: this.$route.query.id
          }, success: res => {
            this.loading = false;
            const data = res.data;
            this.card_number = data.card_number;
            this.full_name = data.full_name;
            this.tel = data.tel;
            this.id_card = data.IDcard;
            this.address = data.address;
            let villageIndex = this.villageList.findIndex(item => {
              return item.id == data.village_id
            })
            this.villageIndex = ~villageIndex ? villageIndex : '';
          }, error: e => {
            this.loading = false;
          }
        })
      },

      //获取园区
      getPartnerVillage() {
        return new Promise((resolve, reject) => {
          this.$post({
            url: "Partner/WaterCard/get_village",
            success: res => {
              if (res.code > 0) {
                resolve(res.data)
              } else {
                reject(res.message);
              }
            }, error: e => {
              reject("网络错误")
            }
          })
        })
      },

    },
    mounted() {
      this.getPartnerVillage().then(res => {
        this.villageList = res;
        this.getCardInfo();
      }).catch(e => {
        this.$message.error(e)
      });
    },
    watch: {

    }
  }
</script>

<style scoped>
  .card-wrapper {
    /* position: absolute; */
    background: #FAFAFA;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .card-top-wrapper {
    background: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    position: relative;
  }

  .edit-wrapper {
    margin-top: 15px;
    padding: 30px;
    background: #fff;
  }

  .edit-row {
    width: 500px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .edit-label {
    width: 80px;
    flex-shrink: 0;
  }

  .edit-select {
    flex: 1;
  }

  .submit-btn{
   margin-left: 80px;
  }
 
</style>